<template>
	<view>
		<view class="songdata">
			<view class="swiper-item">
				<view class="songsitem" v-for="(item,index) in 4" :key="index">
					<view class="imgbox">
						<image :src="item.coverImgUrl" mode="" style="width: 150rpx;height: 150rpx;border-radius: 15px;"></image>
					</view>
					<view class="desc">
						<view class="topitem">
							{{item.name}}
						</view>
						<view class="bow">
							<text>{{songle.ar[0].name}}</text>
							<text>·</text>
							<text>{{songle.name}}</text>
						</view>
					</view>
					<view class="more">
						<image src="@/static/images/more.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			datalist: Array,
		},
		data() {
			return {
			itemIndex:100
			}
		},
		methods: {
			tapscroll() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				})
			},
			changestate(index,songle){
				this.itemIndex = index
				uni.$emit('getsongitem',songle)
				uni.switchTab({
					url:'/pages/music/music' 
				})
				
			}
		}
	}
</script>

<style>
	.top {
		display: flex;
		justify-content: space-around;
		margin-top: 50rpx;
	}

	.imageitem {
		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
		border: 1rpx solid #bfbfbf;
	}

	.bowwon {
		display: flex;
		justify-content: space-around;
	}

	.pattion {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #bfbfbf;
		margin-top: 70rpx;
		margin-right: 20rpx;
	}

	.fans {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #bfbfbf;
		margin-top: 70rpx;
		margin-left: 40rpx;
	}

	.item1 {
		font-size: 28rpx;
	}

	.item2 {
		font-size: 40rpx;
		color: aliceblue;
	}

	.nickname {
		color: #bfbfbf;
		font-size: 60rpx
	}

	.vipbox {
		position: relative;
		top: 180rpx;
		right: 120rpx;
		background-color: #1d1d1d;
		font-size: 28rpx;
		display: inline-block;
		border-radius: 30rpx;
		color: #02d15f;
		padding: 20rpx;
	}

	.content {
		margin-top: 30rpx;
		margin-left: 10rpx;
	}
	.scroll-item{
		color: #bfbfbf;
		display: inline-block;
		width: 30%;
		margin-top: 50rpx;
		margin-left: 20rpx;
	}
	..scroll-content {
		
		width: 100%;
		white-space: nowrap;
	}
	.songsitem{
		height: 160rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.desc{
		height: 135rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-bottom: 40rpx;
	}
	.topitem{
		width: 450rpx;
		color: #bfbfbf;
		font-size: 32rpx
	}
	.bow{
		color: #bfbfbf;
		font-size: 24rpx
	}
	.f-active-color {
		color: #02d15f;
		font-size: 36rpx
	}
</style>
